<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>BOM</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<body>
<style>
    body{
        background-color: white;
    }
</style>
<div id="pro">
    <template>
        <div>
            <template>
                <el-button type="primary" @click="fence">添加BOM</el-button>
                <el-button type="success" @click="update">修改BOM</el-button>
                <el-button type="danger" @click="del">删除BOM</el-button>
            </template>
        </div>
        <br/>
        <div>
            <el-table
                    :data="purList"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="bomId"
                    border
                    @selection-change="changeSelection"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column type="selection"></el-table-column>
                <el-table-column
                        prop="bomId"
                        label="编号"
                        sortable
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="bomName"
                        label="名称"
                        sortable
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="bomPartid"
                        label="零件编号">
                </el-table-column>
                <el-table-column
                        prop="bomNumber"
                        label="数量">
                </el-table-column>
                <el-table-column
                        prop="bomMetering"
                        label="计量单位">
                </el-table-column>
                <el-table-column
                        prop="bomLevel"
                        label="所属级别">
                </el-table-column>
            </el-table>
        </div>
        <!--添加-->
        <el-dialog
                title="添加BOM"
                :visible.sync="dialogVisible"
                width="40%"
                :before-close="handleClose">
            <template>
                <el-form>
                    <el-form-item label="上级目录:">
                        <el-select style="width:80vh" v-model="fvo.bomLevel" placeholder="请选择">
                            <el-option label="主目录" :value="-1"></el-option>
                            <el-option
                                    v-for="item in selectf"
                                    :key="item.bomId"
                                    :label="item.bomName"
                                    :value="item.bomId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="类别名称:">
                        <el-input v-model="fvo.bomName" style="width:80vh"></el-input>
                    </el-form-item>
                    <el-form-item label="商品编号:">
                        <el-input v-model="fvo.bomPartid" style="width:80vh"></el-input>
                    </el-form-item>
                    <el-form-item label="使用数量:">
                        <el-input v-model="fvo.bomNumber" style="width:80vh"></el-input>
                    </el-form-item>
                    <el-form-item label="计量单位:">
                        <el-input v-model="fvo.bomMetering" style="width:80vh"></el-input>
                    </el-form-item>
                </el-form>
            </template>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="bominsert">确 定</el-button>
                </span>
        </el-dialog>
        <el-dialog
                title="修改BOM"
                :visible.sync="editlog"
                width="40%"
                :before-close="handleClose">
            <template>
                <el-form>
                    <el-form-item label="上级目录:">
                        <el-select style="width:80vh" v-model="edatalist.bomLevel" placeholder="请选择">
                            <el-option label="主目录" :value="-1"></el-option>
                            <el-option
                                    v-for="item in eselectlist"
                                    :key="item.bomId"
                                    :label="item.bomName"
                                    :value="item.bomId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="类别名称:">
                        <el-input v-model="edatalist.bomName" style="width:80vh"></el-input>
                    </el-form-item>
                    <el-form-item label="商品编号:">
                        <el-input v-model="edatalist.bomPartid" style="width:80vh"></el-input>
                    </el-form-item>
                    <el-form-item label="使用数量:">
                        <el-input v-model="edatalist.bomNumber" style="width:80vh"></el-input>
                    </el-form-item>
                    <el-form-item label="计量单位:">
                        <el-input v-model="edatalist.bomMetering" style="width:80vh"></el-input>
                    </el-form-item>
                </el-form>
            </template>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="editlog = false">取 消</el-button>
                    <el-button type="primary" @click="edit">确 定</el-button>
                </span>
        </el-dialog>
    </template>
</div>
<script>
    new Vue({
        el: "#pro",
        data: {
            purList: [],
            dialogVisible: false,
            editlog: false,
            fvo: {
                bomName: '',
                bomPartid: '',
                bomLevel: '',
                bomNumber: '',
                bomMetering: ''
            },
            selectf: [],
            datalist: '',
            bomids: [],
            bianhao: '',
            //修改
            edatalist: [],
            eselectlist: [],
            //删除
            delid:'',
            delids:''
        },
        methods: {
            search() {
                axios.get("/Tbom/searchlist")
                    .then(({data}) => {
                        this.purList = data.data;
                    })
            },
            selectzhu() {
                axios.get("/Tbom/selectzhu?level=" + this.datalist)
                    .then(({data}) => {
                        this.selectf = data.data;
                    })
            },
            fence() {
                if (this.bomids.length == 0 || this.bomids.length == undefined) {
                    this.fvo.bomLevel = ''
                    this.fvo.bomPartid = ''
                    this.BomAdd();
                } else {
                    this.zibom();
                }
                this.selectzhu();
            },

            BomAdd() {
                this.dialogVisible = true;
            },
            bominsert() {
                if (this.fvo.bomLevel == -1) {
                    this.fvo.bomLevel = null;
                }
                axios.post("/Tbom/BomAdd", this.fvo)
                    .then(({data}) => {
                        this.dialogVisible = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                        this.reset();
                        this.selectzhu();
                    })
            },
            zibom() {
                if (this.bomids.length != 1) {
                    this.$alert("请选择一项！", "消息提示");
                    return;
                }
                this.BomAdd();
                this.fvo.bomLevel = this.datalist;
                this.fvo.bomPartid = this.bianhao;
            },
            changeSelection(arr) {
                if (arr.length == 0) {
                    this.datalist = 0;
                    this.bomids = 0;
                    return;
                }
                this.datalist = arr[0].bomId;
                this.bomids = arr.map(bom => bom.bomId)
                //修改
                this.edatalist = arr[0];
                //删除
                this.delid=arr[0].bomId;
                this.delsearch();
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //修改
            editsearch() {
                axios.get("/Tbom/editsearch")
                    .then(({data}) => {
                        this.eselectlist = data.data;
                    })
            },
            update() {
                if (this.bomids.length != 1) {
                    this.$alert("请选择一项！", "消息提示");
                    return;
                }
                this.editsearch();
                this.editlog = true;
            },
            edit() {
                axios.put("/Tbom/edit", this.edatalist)
                    .then(({data}) => {
                        this.editlog = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                    })
            },
            delsearch(){
                axios.get("/Tbom/delsearch?id="+this.delid)
                    .then((data)=>{
                        this.delids=data.data;
                    })
            },
            del(){
                if (this.bomids.length != 1) {
                    this.$alert("请选择一项！", "消息提示");
                    return;
                }
                if (this.delids>0){
                    this.$message({
                        message: '下有子级，请删除子级后，在进行删除！',
                        type: 'danger'
                    });
                }else{
                    axios.delete("/Tbom/del?id="+this.delid)
                        .then(({data})=>{
                            this.$message({
                                message: data.msg,
                                type: data.code == 200 ? 'success' : 'error'
                            });
                            this.search();
                        })
                }

            },
            //清空
            reset() {
                this.fvo.bomName = '';
                this.fvo.bomPartid = '';
                this.fvo.text = '';
            },
        },
        mounted() {
            this.search();
            this.selectzhu();
        }
    })
</script>
</body>
</html>